<template>
  <div>
    <!-- <div class="date">
            <el-form ref="form" :inline="true" :model="form" label-width="150px" >
                <el-form-item label="质押生效时间">
                    <el-date-picker
                        v-model="form.takeEffectDate"
                        type="date"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="质押解除日期">
                    <el-date-picker
                        v-model="form.relieveDate"
                        type="date"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
            </el-form>
        </div> -->
    <!-- :span-method="objectSpanMethod2" -->
    <el-table
      :data="tableData"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      style="width: 96%;border:none;margin: 0 auto"
      :row-class-name="tableRowClassName"
      :row-style="{ border: 'none' }"
      :cell-style="{ border: 'none' }"
    >
      <el-table-column prop="pn" label="涉及专利" width="180">
        <template slot-scope="scope">
          <span @click="toPn(scope.row)">{{
            scope.row.pn
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="dengjihao"
        label="质押号"
        width="180"
      ></el-table-column>
      <el-table-column label="质押生效日期" width="120">
        <template slot-scope="scope">
          <div>{{ scope.row.dengjishengxiaori | date }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="chuzhiren" label="出质人"></el-table-column>
      <el-table-column prop="zhiquanren" label="质权人">
        <template slot-scope="scope">
          <p :title="scope.row.zhiquanren">{{ scope.row.zhiquanren }}</p>
        </template>
      </el-table-column>
      <el-table-column label="质押解除日期">
        <template slot-scope="scope">
          <p>{{ scope.row.zhiyaJiechuri | date }}</p>
        </template>
      </el-table-column>
      <!-- assessment.Pledgee -->
    </el-table>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="ips"
        :current-page.sync="ipi"
        @current-change="getLawCurrentPage"
        class="el-pagination"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      form: {
        takeEffectDate: "",
        relieveDate: ""
      },
      tableData: [],
      total: 0,
      ipi: 1,
      ips: 5,
      loading: false
    };
  },
  filters: {
    date(val) {
      if (val) {
        let str =
          val.substring(0, 4) +
          "-" +
          val.substring(4, 6) +
          "-" +
          val.substring(6, 8);
        return str;
      }
    }
  },
  computed: {
    ...mapState(["levelCode"])
  },
  mounted() {
    this.dateVal = this.$DateManag();
    this.getLawstatus();
  },
  methods: {
    getLawCurrentPage(val) {
      this.ipi = val;
      this.getLawstatus();
    },
    getLawstatus() {
      this.loading = true;
      this.$post(this.$Url.finance.cityZhiya, {
        code: this.levelCode,
        musts: {
          legal_zhiya: "1"
        },
        ipi: this.ipi,
        ips: this.ips,
        rangArr: [
          {
            field: "ad",
            start: this.dateVal.start,
            end: this.dateVal.end
          }
        ]
      })
        .then(res => {
          if (res.data.result) {
            this.total = res.data.page.totalRow;
            this.tableData = res.data.result;
            this.loading = false;
          }
        })
        .catch(e => {
          console.log(e);
        });
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2) {
        return "warning-row";
      }
      return "";
    },
    // 专利质押
    rowspan2() {
      let spanArr2 = [],
        contactDot = 0;
      this.tableData.forEach((item, index) => {
        if (index === 0) {
          spanArr2.push(1);
        } else {
          if (item.pn === this.tableData[index - 1].pn) {
            spanArr2[contactDot] += 1;
            spanArr2.push(0);
          } else {
            spanArr2.push(1);
            contactDot = index;
          }
        }
      });
      this.spanArr2 = spanArr2;
    },
    objectSpanMethod2({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr2[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    },
    toPn(row) {
    }
  }
};
</script>
<style lang="scss" scoped>
.date {
  padding-top: 20px;
  // padding-left:20px;
}
.pagination {
  text-align: center;
  padding: 20px;
}
</style>